<template>
	<view class="container">
		<u-navbar
			title="提现" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<view class="content flex_clm justify-start align-start">
			<view class="line_1">
				<text class="text_1" style="margin-right: 10rpx;">可提现金额：</text>
				<text class="text_2">￥{{ userInfo.balance.toFixed(2) }}</text>
			</view>
			<view class="line_3">输入提现金额</view>
			<view class="line_4 flex justify-start align-end">
				<u-input 
					v-model="price" 
					type="digit"
					@input="checkAmount"
					:border="false"
					placeholder="请输入"
					style="border-bottom: 1rpx solid #dedede;width: 380rpx;margin-right: 48rpx;margin-top: 33rpx;"
				/>
				<text class="text_4" @tap.stop="handleAll">全部提现</text>
			</view>
			<view class="line_5">
				<text class="text_1">提现手续费：{{ Number.isNaN(price*Number(comm)) ? 0 : (price*Number(comm)).toFixed(2) }}</text>
			</view>
			<view class="line_6">
				<text class="text_2">选择提现方式</text>
			</view>
			<view class="line_7">
				<view 
					class="line_7_item flex justify-btw align-center"
					v-for="(item,index) in payTypeList"
					:key="index"
					@tap.stop="toPayTypePage(item.type)"
				>
					<view class="left flex justify-start align-center">
						<image style="width: 50rpx;height: 50rpx;margin-right: 18rpx;" :src="item.image" mode=""></image>
						<text class="text_5">{{item.name}}</text>
					</view>
					<image style="width: 30rpx;height: 30rpx;" src="../../static/images/new_right_arrow.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="warning flex justify-start align-center">
			<image style="width: 28rpx;height: 28rpx;margin-right: 12rpx;" src="../../static/images/warning_icon.png" mode=""></image>
			<text class="text_4">每月只可提现{{count}}次，每次不低于{{ lessMoney }}。</text>
		</view>
		<view
			class="submitBtn flex justify-center align-center"
			@tap.stop="handleClick"
		>提现</view>
	</view>
</template>

<script setup>
import {computed, getCurrentInstance, ref } from 'vue'
import { onLoad, onUnload, onShow } from "@dcloudio/uni-app"
const {proxy} = getCurrentInstance()

const price = ref(undefined)  //提现金额
const withdrawalRecordId = ref('')	//账户id
const comm = ref(0) //提现手续费比例
const count = ref(999)  //每月限制提现次数
const lessMoney = ref(0)  //单次提现最低金额
const userInfo = ref({})
const payTypeList = ref([
	{name:'微信账号', type:'1', image:'/static/images/icon_pay_wx.png'},
	{name:'支付宝账号', type:'2', image:'/static/images/icon_pay_zfb.png'},
	{name:'银行卡账号', type:'3', image:'/static/images/icon_pay_yhk.png'},
])
const commPrice = computed(()=>{
	
})

onLoad(()=>{
	getDicData()
	uni.$on('selected_account', (e)=>{
		withdrawalRecordId.value = e.value
	})
})
onUnload(()=>{
	uni.$off('selected_account')
})
onShow(()=>{
	userInfo.value = uni.getStorageSync("USER_INFO")
})
// 校验
function checkAmount(e){
	console.log(e)
	e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
	if(e>userInfo.value.balance){
		proxy.tui.toast("提现金额不可大于余额")
		e = userInfo.value.balance
	}
	console.log(e)
	setTimeout(()=>{
		proxy.$nextTick(() => {
			price.value = e
		})
	}, 10)
}
// 获取提现相关字典数据
function getDicData(){
	proxy.api.system({code: 'withdrawal'}).then(res=>{
		let arr = res.data.data || []
		arr.forEach(item=>{
			if(item.code=='WITHDRAWAL_COMM'){
				comm.value = item.dictValue  //提现手续费比例
			}else if(item.code=='WITHDRAWAL_COUNT'){
				count.value = item.dictValue  //每月限制提现次数
			}else if(item.code=='WITHDRAWAL_LESSMONEY'){
				lessMoney.value = item.dictValue  //单次提现最低金额
			}
		})
	})
}
// 全部提现
function handleAll(){
	price.value = userInfo.value.balance.toFixed(2)
}
// 跳转支付方式列表
function toPayTypePage(type){
	uni.navigateTo({
		url:'/pages/setting/withdrawAccount?type='+type
	})
}
// 提现
function handleClick(){
	if(proxy.utils.isNullOrEmpty(price.value)){
		proxy.tui.toast('请输入提现金额')
		return
	}else if(!withdrawalRecordId.value){
		proxy.tui.toast('请选择提现账号')
		return
	}
	let query = {
		price: price.value,
		withdrawalRecordId: withdrawalRecordId.value,
		commissionPrice: price.value * Number(comm.value)
	}
	proxy.api.addWithdrawal(query).then(res=>{
		uni.$emit('handle_tixian')
		uni.navigateBack({
			delta: 2
		})
	})
}

</script>

<style lang="scss" scoped>
	::v-deep .u-input__input{
		font-family: 'DIN' !important;
		font-weight: 500 !important;
		font-size: 68rpx !important;
		color: #333 !important;
		line-height: 87rpx !important;
		margin-bottom: 21rpx;
	}
	page{
		background-color: #f5f5f5;
	}
	.text_1{@include str(28rpx, 500, #999); line-height: 40rpx;}
	.text_2{@include str(32rpx, bold, #333); line-height: 45rpx;}
	.text_3{@include str(28rpx, bold, #333); line-height: 40rpx;}
	.text_4{@include str(28rpx, bold, $uni-color-primary); line-height: 40rpx;}
	.text_5{@include str(32rpx, 500, #333); line-height: 42rpx;}
	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		background-color: $uni-bg-color-grey;
		.content {
			background-color: #fff;
			padding: 31rpx 30rpx 3rpx 30rpx;
			.line_1{
				margin-bottom: 50rpx;
			}
			.line_2{
				margin-bottom: 33rpx;
			}
			.line_5{
				line-height: 84rpx;
				width: 100vw;
				background-color: #f5f5f5;
				margin-top: 34rpx;
				margin-left: -30rpx;
				padding-left: 30rpx;
			}
			.line_6{
				margin-top: 36rpx;
				margin-bottom: 50rpx;
			}
			.line_7{
				width: 100%;
				&_item{
					margin-bottom: 52rpx;
				}
			}
		}
		.warning{
			width: 100vw;
			padding-top: 42rpx;
			padding-left: 30rpx;
		}
		.submitBtn{
			width: 690rpx;
			height: 88rpx;
			background: $uni-color-primary;
			border-radius: 50rpx;
			@include str(32rpx, 500, #fff);
			margin-left: 30rpx;
			margin-top: 142rpx;
		}
	}
</style>